<template>
  <div class="m-martin__pagenation">
    <button :disabled="curPage === 1" :class="['c-pagenation__option', {'c-prev__disabled': curPage === 1, 'c-pagenation__tab': curPage !== 1}]" @click="optionPage('prev')">
      <i class="iconfont">&#xe600;</i>
    </button>
    <div class="c-pagenation__section">
      <ul class="c-pagenation__ul">
        <li :class="['c-pagenation__tab', 'c-pagenation__li', {'c-pagenation__tab--active': page.check, 'c-pagenation__prev': index === 1, 'c-pagenation__next': index === (pagenationOption.length - 2)}]" v-for="(page, index) in pagenationOption" :key="index" @click="selectActive(page.number, index)" v-html="page.number">
        </li>
      </ul>
    </div>
    <button :disabled="curPage === pageTotal" :class="['c-pagenation__option', {'c-prev__disabled': curPage === pageTotal, 'c-pagenation__tab': curPage !== pageTotal}]" @click="optionPage('plus')">
      <i class="iconfont">&#xe601;</i>
    </button>
  </div>
</template>

<script>
export default {
  name: 'MartinPagenation',
  props: {
    currentPage: {
      type: Number,
      default: 1,
      required: false
    },
    pageCount: {
      type: Number,
      default: 0,
      required: false
    },
    pageSize: {
      type: Number,
      default: 12,
      required: false
    },
    totalCount: {
      type: Number,
      default: 1,
      required: false
    }
  },
  computed: {
    pagenationTemplate() {
      return `<i class="iconfont c-point">&#xe601;</i><i class="iconfont c-arrow">&#xe600;</i>`
    }
  },
  data() {
    return {
      pageTotal: 0,
      pagenationOption: [
        {
          number: 1,
          check: true
        }
      ],
      prevShow: false,
      curPage: this.currentPage
    }
  },
  methods: {
    optionPage(type) {
      this.curPage = type === 'prev' ? this.curPage - 1 : this.curPage + 1
      this.$emit('changePage', this.curPage)
    },
    selectActive(page, i) {
      if (Number.isNaN(+page)) {
        if (i < 2) {
          this.curPage -= 7
        } else this.curPage += 7
      } else {
        this.curPage = page
      }
      this.$emit('changePage', this.curPage)
    },
    initPagenation() {
      this.pagenationOption.splice(8, 1)
      this.pagenationOption[0].number = 1
      this.pagenationOption[1].number = 2
      this.pagenationOption[2].number = 3
      this.pagenationOption[3].number = 4
      this.pagenationOption[4].number = 5
      this.pagenationOption[5].number = 6
      this.pagenationOption[6].number = `<i class="iconfont c-point">...</i><i class="iconfont c-arrow">&#xe601;</i>`
      this.pagenationOption[7].number = this.pageTotal
    },
    morePagenation() {
      this.pagenationOption[2].number = this.curPage - 2
      this.pagenationOption[3].number = this.curPage - 1
      this.pagenationOption[4].number = this.curPage
      this.pagenationOption[5].number = this.curPage + 1
      this.pagenationOption[6].number = this.curPage + 2
      this.pagenationOption[7].number = `<i class="iconfont c-point">...</i><i class="iconfont c-arrow">&#xe601;</i>`
      this.pagenationOption[8] = {
        number: this.pageTotal,
        check: false
      }
    },
    lastPagenation() {
      this.pagenationOption.splice(8, 1)
      this.pagenationOption[2].number = this.pageTotal - 5
      this.pagenationOption[3].number = this.pageTotal - 4
      this.pagenationOption[4].number = this.pageTotal - 3
      this.pagenationOption[5].number = this.pageTotal - 2
      this.pagenationOption[6].number = this.pageTotal - 1
      this.pagenationOption[7].number = this.pageTotal
    }
  },
  watch: {
    pageCount: {
      handler() {
        // this.pagenationOption = []
        let pageCount = 1
        if (this.pageCount) {
          pageCount = this.pageCount
          this.pageTotal = this.pageCount
        } else if (this.totalCount) {
          pageCount = Math.ceil(this.totalCount / this.pageSize)
          this.pageTotal = pageCount
        }
        const length = pageCount > 7 ? 8 : pageCount
        for (let i = 2; i <= length; i++) {
          if (pageCount > 7) {
            this.pagenationOption.push({
              number: i <= 6 ? i : i === 7 ? this.pagenationTemplate : pageCount,
              check: !!(i === 1)
            })
          } else {
            this.pagenationOption.push({
              number: i,
              check: !!(i === 1)
            })
          }
        }
      },
      immediate: true
    },
    curPage: {
      handler (page) {
        if (this.pageTotal >= 10) {
          if (page > 4) {
            this.pagenationOption[1].number = `<i class="iconfont c-point">...</i><i class="iconfont c-arrow">&#xe601;</i>`
            if (page > this.pageTotal - 5) {
              this.lastPagenation()
            } else {
              this.morePagenation()
            }
          } else {
            this.initPagenation()
          }
        }
        this.pagenationOption.forEach((el, index) => {
          el.check = !!(page === el.number)
        })
      },
      immediate: true
    }
  }
}
</script>
